<template>
  <div class="scroll-wrap">
    <img src="../../static/img/tip.png" >
    <ul class="scroll-content" :style="{ top }">
      <li v-for="item in prizeList" :key="item.unid">
         <router-link :to='{name: "Notedetail"}'>{{item.name}}</router-link>
      </li>
    </ul>
  </div>
</template>
<script type="text/ecmascript-6">
  export default {
  data () {
    return {
      prizeList: [
        { name:'春季餐饮服务食品安全消费警示' },
        { name:'夏季餐饮服务食品安全消费警示111' },
        { name:'秋季餐饮服务食品安全消费警示222' },
        { name:'冬季餐饮服务食品安全消费警示333'} 
      ],
      activeIndex: 0
    }
  },

  computed: {
    top() {
     // return - this.activeIndex * 50 + 'px';
    }
  },
 mounted() {
        setInterval(_ => {
            this.prizeList.push(this.prizeList[0])
            this.activeIndex += 1;
        }, 1000);
        setTimeout(_ => {
            setInterval(_ => {
                this.prizeList.splice(0,1)
                this.activeIndex =0;
            }, 1500);
        },1500);
      },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="scss" scoped>
  .scroll-wrap{
  width:100%;
  height:42px;
  overflow: hidden;
  background: #fff;
  margin:8px 0px;
  img{
    width: 20px;
    height:20px;
    float: left;
    margin:11px;
  }
}

.scroll-content{
  float:left;
  position: relative;
  transition: top 0.5s;
  margin: 0;
  padding: 0;
  li{
    line-height:42px;
    text-align:left;
    color: #818181;
    font-size: .8rem;
  }
}
</style>
